<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head lang="en">

    <title>Create new product</title>

</head>
<body>
<h2 layout:fragment="header">New Product</h2>
<div class="container" layout:fragment="content">

    <h2>Product Details</h2>
    <div>
        <p th:if="${#fields.hasErrors('${product}')}" th:errors="${product}"></p>
        <form class="form-horizontal" th:object="${product}" th:action="@{/product}" method="post">
            <input type="hidden" th:field="*{id}"/>
            <input type="hidden" th:field="*{version}"/>

            <div th:if="${#fields.hasErrors('*')}"
                 class="alert alert-error">
                <p th:each="error : ${#fields.errors('*')}"
                   th:text="${error}">
                    Validation error
                </p>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">Name:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:field="*{name}"/>
                    <p th:if="${#fields.hasErrors('name')}" class="error" th:errors="*{name}"></p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Description:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:field="*{description}"/>
                    <p th:if="${#fields.hasErrors('description')}" th:errors="*{description}"></p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Price:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:field="*{price}"/>
                    <p th:if="${#fields.hasErrors('price')}" th:errors="*{price}"></p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Image Url:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:field="*{imageUrl}"/>
                    <p th:if="${#fields.hasErrors('imageUrl')}" th:errors="*{imageUrl}"></p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Product date:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:field="*{productDate}"/>
                    <p th:if="${#fields.hasErrors('productDate')}" th:errors="*{productDate}"></p>
                </div>
            </div>
            <div class="row">
                <button type="submit" class="btn btn-default">Submit</button>
            </div>
        </form>
    </div>
</div>

</body>
</html>